<template>
  <div>
    <div class="recommend-title">
      <span class="title-desc">周末去哪儿</span>
    </div>
    <ul class="recommend-list" v-if="showList">
      <li class="recommend-item border-bottom" v-for="item of list" :key="item.id">
        <a href="" class="item">
          <div class="img-wrap">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="info-wrap">
            <div class="info-title">{{item.title}}</div>
            <div class="info-desc">{{item.desc}}</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  },
  computed: {
    showList () {
      return this.list.length
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .recommend-title
    padding: .24rem .26rem
    img
      width: .3rem
      height: .3rem
      vertical-align: middle
    .title-desc
      display: inline-block
      vertical-align: middle
  .recommend-item
    padding: .2rem  0
  .item
    .img-wrap
      width: 100%
      height: 0
      padding-bottom: 37.5%
      background: #f0f0f0
      position: relative
      overflow: hidden
      img
        width: 100%
        opacity: 1
    .info-wrap
      padding-left: .22rem
      .info-title
        margin-top: .26rem
        height: .44rem
        font-size: .32rem
        line-height: .44rem
        color: #212121
      .info-desc
        overflow: hidden
        padding-right: 1.4rem
        color: #616161
        line-height: .42rem
        font-size: .24rem
        ellipsis()
</style>
